<template>
	<div class="auth-container" @click="handleCanvasClick">
		<div class="qrcode-container">
			<canvas ref="qrcodeCanvas"></canvas>
			<div v-if="scanStatus" class="scan-status">
				<span :class="statusClass">{{ statusText }}</span>
			</div>
		</div>
		<p v-if="!isExpired">请使用企业微信扫码登录</p>
		<p v-else-if="isExpired" class="expired">二维码已过期</p>
		<div v-if="loading" class="loading">登录中...</div>
		<div v-if="error" class="error">{{ error }}</div>
	</div>
</template>

<script setup>
	import wechatAuthApi from '@/api/auth/wechatAuthApi'
	import QRCode from 'qrcode'
	import { ref, onMounted, onUnmounted, computed } from 'vue'
	import { afterLogin } from '@/views/auth/login/util'

	const qrcodeCanvas = ref()
	const state = ref('')
	const OAuthUrl = ref('')
	const scanStatus = ref('')
	const isExpired = ref(false)
	const loading = ref(false)
	const error = ref('')
	const pollInterval = ref(null)

	const statusText = computed(() => {
		switch (scanStatus.value) {
			case '0':
				return '待扫描'
			case '1':
				return '已扫描，正在登录'
			case 'null':
				return '二维码已过期'
			default:
				return ''
		}
	})

	const statusClass = computed(() => {
		return {
			waiting: scanStatus.value === '0',
			scanning: scanStatus.value === '1',
			expired: scanStatus.value === 'null',
			success: scanStatus.value === '2'
		}
	})

	const initQrCode = async () => {
		try {
			clearInterval(pollInterval.value)
			isExpired.value = false
			scanStatus.value = ''
			state.value = Math.random().toString(36).substring(2, 15) + '_' + Date.now()
			OAuthUrl.value = await wechatAuthApi.getOAuthUrl(state.value)
			await QRCode.toCanvas(qrcodeCanvas.value, OAuthUrl.value, {
				width: 220,
				margin: 1,
				color: {
					dark: '#000000'
				}
			})
			startPolling()
		} catch (err) {
			console.error(err)
			error.value = '生成二维码失败'
		}
	}

	const startPolling = () => {
		pollInterval.value = setInterval(async () => {
			try {
				const res = await wechatAuthApi.checkScanStatus(state.value)

				if (res === '0') {
					// 待扫描状态
					scanStatus.value = '0'
					isExpired.value = false
				} else if (res === '1') {
					// 已扫描，执行登录
					scanStatus.value = '1'
					isExpired.value = false
				} else if (res === null || res === 'null') {
					// 二维码过期
					scanStatus.value = 'null'
					isExpired.value = true
					clearInterval(pollInterval.value)
				} else {
					// 其他值视为token，登录成功
					scanStatus.value = '2'
					clearInterval(pollInterval.value)
					loading.value = true
					await afterLogin(res)
				}
			} catch (err) {
				console.error(err)
				clearInterval(pollInterval.value)
				error.value = '查询扫码状态失败'
			}
		}, 1000)
	}

	const handleCanvasClick = () => {
		if (isExpired.value || scanStatus.value === 'null') {
			initQrCode()
		}
	}

	onMounted(() => {
		initQrCode()
	})

	onUnmounted(() => {
		clearInterval(pollInterval.value)
	})
</script>

<style scoped>
	.auth-container {
		text-align: center;
		padding: 20px;
		max-width: 300px;
		margin: 0 auto;
		background: #fff;
		border-radius: 8px;
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
	}

	.qrcode-container {
		position: relative;
		margin: 0 auto 30px;
		height: 250px;
		transition: all 0.3s ease;
	}

	.qrcode-container:hover {
		transform: translateY(-2px);
	}

	canvas {
		border: 1px solid #eee;
		border-radius: 4px;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	}

	.scan-status {
		position: absolute;
		bottom: -10px;
		left: 50%;
		transform: translateX(-50%);
		width: 90%;
		background: rgba(0, 0, 0, 0.6);
		color: white;
		padding: 6px 0;
		border-radius: 4px;
		font-size: 13px;
		animation: fadeIn 0.3s ease;
		backdrop-filter: blur(2px);
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	}

	@keyframes fadeIn {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}

	.auth-container p {
		margin: 10px 0;
		color: #666;
		font-size: 14px;
	}

	.waiting {
		color: #409eff;
		animation: pulse 1.5s infinite;
	}

	.scanning {
		color: #e6a23c;
		animation: pulse 1s infinite;
	}

	.expired {
		color: #f56c6c;
	}

	.success {
		color: #67c23a;
	}

	.loading {
		color: #409eff;
		margin: 15px 0;
		font-size: 14px;
	}

	.error {
		color: #f56c6c;
		margin: 15px 0;
		font-size: 14px;
		animation: shake 0.5s;
	}

	@keyframes pulse {
		0% {
			opacity: 1;
		}
		50% {
			opacity: 0.6;
		}
		100% {
			opacity: 1;
		}
	}

	@keyframes shake {
		0%,
		100% {
			transform: translateX(0);
		}
		20%,
		60% {
			transform: translateX(-5px);
		}
		40%,
		80% {
			transform: translateX(5px);
		}
	}

	.refresh-hint {
		font-size: 12px;
		color: #999;
		margin-top: 10px;
	}
</style>
